<template>
  <transition name="Fade" v-on:after-leave="afterLeave">
    <div class="toast-prop" v-show="visible">
      <transition name="FadeIn" v-on:after-leave="afterLeave">
        <div class="removecomfirm" v-show="visible">
          <span class="close" @click="handleAction('close')" v-if="isClose">
            <i class="iconfont icon-tubiaomoban_guanbi1"></i> 
          </span>
          <div class="con">
            <div class="t">{{title}}</div>
            <div class="c" v-html="subtitle"></div>
          </div>
          <div class="bottom" v-if="type === 'confirm'">
            <span class="btn comfirmbtn" @click="handleAction('confirm')">{{ConfirmBtn}}</span>
            <span class="btn removecollectbtn" @click="handleAction('cancel')">{{CancelBtn}}</span>
          </div>
          <div class="bottom" v-if="type === 'alert'">
            <span class="btn alertbtn" @click="handleAction('confirm')">{{ConfirmBtn}}</span>
          </div>
        </div>
      </transition>
      <div class="gray-bg" @click="handleAction('maskclose')"></div>
    </div>
  </transition>
</template>

<script>
export default { 
  data() {
    return {
      visible: false,
      type: "confirm",
      title: "提示",
      subtitle: "",
      ConfirmBtn: "确定",
      CancelBtn: "取消",
      isOpen: true,
      isClose: false,
      allowClose: true,
      callback: null,
    };
  },
  methods: {
    //动画结束回调
    afterLeave() {},
    //处理事件
    handleAction(action) {
      if (action === "maskclose" && !this.allowClose) return;

      this.visible = false;
      this.isOpen = false;
      this.Close();
      setTimeout(() => {
        if (
          (action === "close" || action === "maskclose") &&
          this.type === "confirm"
        )
          return;
        this.callback(action, this);
      }, 0);
    },
    //关闭Toast
    Close() {
      setTimeout(() => {
        this.destroyEl();
      }, 200);
    },
    destroyEl() {
      // Destroy El
      this.$el.remove();
      this.$destroy(true);
    },
  },
  watch: {
    visible(newVal, oldVal) {
      if (!newVal && !this.isOpen) {
        this.Close();
      }
    },
  },
};
</script>

<style lang="scss">
.toast-prop {
  .gray-bg {
    position: fixed;
    z-index: 2500;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.removecomfirm {
  font-size: 28px;
  width: 494px;
  position: fixed;
  z-index: 2501;
  background: #fff;
  left: 0;
  right: 0;
  top: 30%;
  border-radius: 20px;
  padding: 0 20px;
  box-sizing: border-box;
  margin: auto;
  .close {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 100;
    right: 22px;
    top: 22px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.5s;
    color: #888888;
    &:hover {
      transform: rotate(90deg);
    }
  }
  .con {
    padding: 50px 30px;
    overflow: hidden;
    text-align: center;
    .t {
      font-family: "PingFang-SC-Bold";
      font-weight: 700;
    }
    .c {
      margin-top: 20px;
      color: #999;
      font-size: 24px;
      font-family: "PingFang-SC-Medium";
    }
  }
  .bottom {
    border-top: #e6e6e6 1px solid;
    overflow: hidden;
    .btn {
      cursor: pointer;
      span {
        display: block;
      }
      &:hover {
        color: #333;
      }
    }
    .comfirmbtn,
    .removecollectbtn {
      float: left;
      width: 50%;
      line-height: 100px;
      height: 100px;
      text-align: center;
      color: #5598d9;
    }
    .comfirmbtn {
      border-right: #e6e6e6 1px solid;
      box-sizing: border-box;
    }
    .alertbtn {
      width: 100%;
      line-height: 100px;
      height: 100px;
      text-align: center;
      color: #5598d9;
      display: block;
    }
  }
}

.Fade-enter-active {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.Fade-leave-active {
  animation-name: fadeOut;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.FadeIn-enter-active {
  animation-name: fadeInDown;
  animation-duration: 0.3s;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}
.FadeIn-leave-active {
  animation-name: fadeInUp;
  animation-duration: 0.3s;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translate3d(0, -30%, 0);
    opacity: 0;
  }
}
@keyframes fadeInDown {
  from {
    transform: translate3d(0, -30%, 0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
</style>
